export default {
    mounted(el) {
        let isDragging = false
        let offsetX = 0
        let offsetY = 0
        let currentX = 0
        let currentY = 0

        // 初始化样式
        el.style.position = 'fixed'
        el.style.cursor = 'grab'
        el.style.touchAction = 'none' // 防止触摸滚动

        // 初始化位置
        const initPosition = () => {
            const rect = el.getBoundingClientRect()
            currentX = rect.left
            currentY = rect.top
            el.style.left = `${currentX}px`
            el.style.top = `${currentY}px`
        }
        initPosition()

        // 边界限制函数
        const applyBoundary = (x, y) => {
            const rect = el.getBoundingClientRect()
            const maxX = window.innerWidth - rect.width
            const maxY = window.innerHeight - rect.height

            return {
                x: Math.max(0, Math.min(x, maxX)),
                y: Math.max(0, Math.min(y, maxY))
            }
        }

        const handleTouchStart = (e) => {
            e.preventDefault()
            isDragging = true
            const touch = e.targetTouches[0]

            // 计算点击偏移量
            const rect = el.getBoundingClientRect()
            offsetX = touch.clientX - rect.left
            offsetY = touch.clientY - rect.top

            el.style.cursor = 'grabbing'
            document.addEventListener('touchmove', handleTouchMove)
            document.addEventListener('touchend', handleTouchEnd)
        }

        const handleTouchMove = (e) => {
            if (!isDragging) return
            const touch = e.targetTouches[0]

            // 计算新位置
            let newX = touch.clientX - offsetX
            let newY = touch.clientY - offsetY

            // 应用边界限制
            const bounded = applyBoundary(newX, newY)
            newX = bounded.x
            newY = bounded.y

            // 更新位置
            el.style.left = `${newX}px`
            el.style.top = `${newY}px`

            // 保存当前位置
            currentX = newX
            currentY = newY
        }

        const handleTouchEnd = () => {
            isDragging = false
            el.style.cursor = 'grab'
            document.removeEventListener('touchmove', handleTouchMove)
            document.removeEventListener('touchend', handleTouchEnd)

            // 最终位置检查
            const bounded = applyBoundary(currentX, currentY)
            el.style.left = `${bounded.x}px`
            el.style.top = `${bounded.y}px`
        }

        // 窗口大小变化时重置位置
        const handleResize = () => {
            const bounded = applyBoundary(currentX, currentY)
            el.style.left = `${bounded.x}px`
            el.style.top = `${bounded.y}px`
        }
        window.addEventListener('resize', handleResize)

        // 保存引用
        el.__dragHandlers__ = {
            touchStart: handleTouchStart,
            touchMove: handleTouchMove,
            touchEnd: handleTouchEnd,
            resize: handleResize
        }

        el.addEventListener('touchstart', handleTouchStart)
    },

    unmounted(el) {
        const { touchStart, touchMove, touchEnd, resize } = el.__dragHandlers__
        document.removeEventListener('touchmove', touchMove)
        document.removeEventListener('touchend', touchEnd)
        window.removeEventListener('resize', resize)
        el.removeEventListener('touchstart', touchStart)
        delete el.__dragHandlers__
    }
}